<template>
  <div class="tool">
    <el-button type="success" size="mini" @click="saveBpmn">保存</el-button>
    <el-button type="success" size="mini" :disabled="!canUndo" @click="handlerUndo">撤销</el-button>
    <el-button type="success" size="mini" :disabled="!canRedo" @click="handlerRedo">还原</el-button>
    <el-button type="success" size="mini" @click="handlerZoom(0.1)" >放大</el-button>
    <el-button type="success" size="mini" @click="handlerZoom(-0.1)" >缩小</el-button>
    <el-button type="success" size="mini" @click="handlerZoom(0)">还原</el-button>
  </div>
</template>
<script>

    export default {
        inject: ['bpmnModeler','modeling','commandStack','canvas','setKey','saveModel'],
        data() {
            return {
                scale:1,
            }
        },
        computed:{
            canUndo(){
                const commandStack = this.commandStack()
                if(commandStack){
                    return this.commandStack().canUndo()
                }
                return false
            },
            canRedo(){
                const commandStack = this.commandStack()
                if(commandStack){
                    return this.commandStack().canRedo()
                }
                return false
            }
        },
        methods:{
            saveBpmn(){
                this.bpmnModeler().saveXML({ format: true }).then(res=>{
                  this.saveModel(res)
                }).catch(err=>{
                    console.error(err)
                })
            },
            handlerZoom(radio) {
                const newScale = !radio ? 1.0 : this.scale + radio
                this.canvas().zoom(newScale)
                this.scale = newScale
            },
            handlerRedo() {
                this.commandStack().redo()
            },
            handlerUndo() {
                this.commandStack().undo()
            }
        },
        mounted() {

        },
      created() {

      }
    }
</script>
